<template>
  <div class="machine">
    <!-- <a-scrollbar style="height: 900px; overflow: auto"> -->
    <template v-for="item in yb" :key="item.machine_id">
      <!-- <template v-if="props.selectVal == '全部' ? true : props.selectVal == item.machine.product_name"> -->
      <template v-if="props.selectVal == '全部' ? true : getYbProduct(item) == props.selectVal + '线'">
        <div class="yb_body" v-if="item.area_name !== item.current_lock_area">
          <template v-if="item.status == 1 || item.status == 2">
            <div class="yb" :style="computeStyle(item)" @click="handlerAreaPointClick(item, 0)">
              <template v-for="(subitem, index) in item.point" :key="subitem.point_id">
                <div
                  :class="subitem.pstatus_point == '未识别' ? 'yb-point-undefined' : 'yb-point'"
                  :style="bucketStyle(subitem)"
                  @click.stop="handlerAreaPointClick(item, subitem.point_number)"
                >
                  {{ subitem.pstatus_iswork == '忙碌' ? subitem.point_work_site : subitem.point_number }}
                </div>
              </template>
            </div>
          </template>
          <template v-if="item.status == 0">
            <div class="yb" :style="computeStyle(item)"></div>
          </template>
          <div class="yb_name" :style="computeNameStyle(item)" @click="handlerAreaClick(item)">
            {{ item.area_name + '-' + getYbProduct(item) }}
          </div>
        </div>
      </template>
    </template>
    <!-- </a-scrollbar> -->
    <AreaModal ref="areaModalRef"></AreaModal>
    <PointModal ref="pointModalRef"></PointModal>
    <AreaPointModal ref="areaPointModalRef"></AreaPointModal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AreaModal from './area-modal.vue'
import AreaPointModal from './areaPoint-modal.vue'
import { Message } from '@arco-design/web-vue'
import PointModal from './point-modal.vue'
import { storeToRefs } from 'pinia'
import useMainStore from '../../../store/main/main'
import useSetStore from '../../../store/setting/setting.js'
const setStore = useSetStore()
const { setting } = storeToRefs(setStore)
const mainStore = useMainStore()
const { yb, ptList, sm, group } = storeToRefs(mainStore)

const props = defineProps({
  selectVal: {
    type: String
  }
})
const getYbItem = (item) => {
  if (props.selectVal == '全部') {
    return true
  }
  const newArr = []
  for (let index = 0; index < sm.value.length; index++) {
    const item = sm.value[index]
    if (props.selectVal == item.product_name) {
      for (let j = 0; j < ptList.value.length; j++) {
        const subitem = ptList.value[j]
        const arr = subitem.machine_full.split(',')
        if (arr.includes(item.machine_name)) {
          const newYbArr = subitem.machine_empty.split(',')
          newArr.push(...newYbArr)
        }
      }
    }
  }
  if (newArr.includes(item.machine_name)) {
    return true
  } else {
    return false
  }
}
const getYbProduct = (yb) => {
  let product = '未配线'
  if (setting.value.sm.machineSelect == '产线') {
    ptList.value.forEach((item) => {
      const newArr = item.machine_empty.split(',')
      if (newArr.includes(yb.machine_name)) {
        const values = item.machine_full.split(',')
        const machineName = values[0]
        // 查找匹配的smitem
        const matchingSmItem = sm.value.find((smitem) => smitem.machine_name === machineName)
        if (matchingSmItem) {
          product = matchingSmItem.product_name + '线'
          return true // 结束遍历
        }
      }
      return false // 继续遍历
    })
  } else if (setting.value.sm.machineSelect == '机台') {
    // 遍历ptList查找匹配项
    ptList.value.some((item) => {
      const newArr = item.machine_empty.split(',')
      if (newArr.includes(yb.machine_name)) {
        const values = item.machine_full.split(',')
        const machineName = values[0]
        // 查找匹配的smitem
        const matchingSmItem = sm.value.find((smitem) => smitem.machine_name === machineName)
        if (matchingSmItem) {
          product = matchingSmItem.machine_name + '线'
          return true // 结束遍历
        }
      }
      return false // 继续遍历
    })
  } else if (setting.value.sm.machineSelect == '组') {
    ptList.value.some((item) => {
      const newArr = item.machine_empty.split(',')
      if (newArr.includes(yb.machine_name)) {
        const values = item.machine_full.split(',')
        // 遍历 group.value
        for (let groupVal of group.value) {
          // 检查 group_member 是否匹配
          if (groupVal.group_member.toString() === values.toString()) {
            product = `${groupVal.group_name}线`
            return true // 结束遍历
          }
        }
      }
    })
  }
  return product
}
function isAreaWidth(item) {
  for (let index = 0; index < setting.value.area.length; index++) {
    if (item.area_name == setting.value.area[index].name) {
      return setting.value.area[index]
    }
  }
  return false
}
function computeStyle(item) {
  const areaWidth = isAreaWidth(item)
  let style = {
    backgroundColor: '',
    border: '',
    width: areaWidth ? areaWidth.value * 87 + 'px' : setting.value.ybArea.number * 87 + 'px',
    height: setting.value.ybArea.height * 77 + 'px'
  }
  if (item.status == 0) {
    style.backgroundColor = 'red'
  } else if (item.status == 1) {
    if (item.area_worktype == '空桶区') {
      style.backgroundColor = '#cff'
    } else if (item.area_worktype == '满桶区') {
      style.backgroundColor = '#ffff9a'
    } else if (item.area_worktype == '复用区') {
      style.backgroundColor = '#ffd8be'
    }
    if (item.area_lock == 1) {
      style.border = '5px solid red'
    } else if (item.area_iotype == 0) {
      style.border = '5px solid olive'
    } else if (item.area_iotype == 1) {
      style.border = '5px solid #1e9ad8'
    } else if (item.area_iotype == 2) {
      style.border = '5px solid yellowgreen'
    } else {
      style.border = ''
    }
  } else if (item.status == 2) {
    style.backgroundColor = '#aaa'
    if (item.area_lock == 1) {
      style.border = '5px solid red'
    } else if (item.area_iotype == 0) {
      style.border = '5px solid olive'
    } else if (item.area_iotype == 1) {
      style.border = '5px solid #1e9ad8'
    } else if (item.area_iotype == 2) {
      style.border = '5px solid yellowgreen'
    } else {
      style.border = ''
    }
  }
  return style
}
function computeNameStyle(item) {
  const areaWidth = isAreaWidth(item)
  let style = {
    backgroundColor: '',
    width: areaWidth ? areaWidth.value * 87 + 'px' : setting.value.ybArea.number * 87 + 'px'
  }
  if (item.status == 0) {
    style.backgroundColor = '#fe0000'
  }
  if (item.status == 1) {
    if (item.if_change_ps) {
      if (item.if_change_ps == 1) {
        style.backgroundColor = 'yellowgreen'
      } else {
        if (item.area_auto == 1) {
          style.backgroundColor = 'green'
        } else {
          style.backgroundColor = '#1e9ad8'
        }
      }
    } else {
      if (item.area_auto == 1) {
        style.backgroundColor = 'green'
      } else {
        style.backgroundColor = '#1e9ad8'
      }
    }
  }
  return style
}
function bucketStyle(subitem) {
  let style = {
    backgroundColor: '',
    border: '',
    animation: ''
  }
  if (subitem.status == 1) {
    if (subitem.pstatus_iswork == '空闲') {
      if (subitem.pstatus_point == '满桶') {
        style.backgroundColor = '#1c62bb'
        style.border = '4px solid #1c62bb'
      } else if (subitem.pstatus_point == '空桶') {
        style.backgroundColor = '#fff'
        style.border = '4px solid #1c62bb'
      } else if (subitem.pstatus_point == '无桶') {
        // style.backgroundColor = '#fff'
        style.border = '4px solid #ccc'
      } else if (subitem.pstatus_point == '满无') {
        style.backgroundColor = 'rgba(28, 98, 187,0.3)'
        style.border = '4px solid rgba(28, 98, 187,0.5)'
      } else if (subitem.pstatus_point == '未识别') {
        style.border = ''
      } else if (subitem.pstatus_point == '未读') {
        style.backgroundColor = '#ccc'
        style.border = '4px solid #000'
      } else if (subitem.pstatus_point == '禁止作业') {
        style.backgroundColor = '#fff'
        style.border = '4px solid red'
      }
    } else {
      style.backgroundColor = 'rgb(255, 179, 0)'
      style.border = '4px solid rgb(255, 179, 0)'
    }
  } else if (subitem.status == 0) {
    style.backgroundColor = '#fe0000'
    style.border = '4px solid #fe0000'
    // style.background = 'url(/static/images/11.png) no-repeat center center / cover'
  }
  return style
}
const areaModalRef = ref()
function handlerAreaClick(item) {
  areaModalRef.value?.setAreaModalVisible(item)
}
const pointModalRef = ref()
function handlerPointClick(item) {
  if (item.pstatus_iswork != '忙碌') {
    pointModalRef.value?.setPointModalVisible(item)
  } else {
    Message.warning('该点位正在工作中，禁止盘库!')
  }
}
const areaPointModalRef = ref()
function handlerAreaPointClick(item, index) {
  areaPointModalRef.value?.setAreaPointModalVisible(item, index)
}
</script>

<style lang="less" scoped>
.machine {
  height: calc(1080px - 100px);
  overflow: auto;
  padding: 10px 10px;
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow: -moz-scrollbars-none; /* Old versions of Firefox */
  overflow-y: scroll; /* 保证在需要时仍可滚动 */

  &::-webkit-scrollbar,
  & *::-webkit-scrollbar {
    width: 0 !important; /* Chrome, Safari, and Opera */
    background: transparent !important;
  }

  &::-webkit-scrollbar-track {
    background: transparent !important;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent !important;
    border: none !important;
  }
  .yb_body {
    float: left;
    margin: 20px 20px 20px 20px;
    position: relative;
    zoom: 1.3;
    .yb {
      float: left;
      box-sizing: border-box;
      min-height: 300px;
      width: 80px;
      height: auto;
      .yb-point {
        float: left;
        box-sizing: border-box;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 8px 10px 8px 10px;
        text-align: center;
        line-height: 52px;
        font-size: 18px;
      }
      .yb-point-undefined {
        float: left;
        box-sizing: border-box;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 8px 10px 8px 10px;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        animation: blink 2s infinite;
      }
    }
    .yb_name {
      // position: absolute;
      // bottom: -60px;
      // margin-top: 10px;
      min-height: 60px;
      background-color: #4bc44b;
      text-align: center;
      line-height: 60px;
      color: #fff;
      font-size: 24px;
    }
  }
}
@keyframes blink {
  0% {
    background-color: #1c62bb;
  }
  50% {
    background-color: #4bc44b;
  }
  100% {
    background-color: #1c62bb;
  }
}
</style>
